<template>
  <div class="left-wrapper">
    <div class="safe outer-wrapper">
      <a href="###">
        <img src="../../../static/images/index/safe.png" alt="" />
      </a>
    </div>
    <HomeLeftTitle :title="'旅行家专栏'" :subTitle="'专栏首页'" />
    <!-- 轮播图 -->
    <div
      class="swiper-container"
      @mouseenter="swiper.autoplay.stop()"
      @mouseleave="swiper.autoplay.start()"
      ref="swiper"
    >
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="img in tourList" :key="img.id">
          <img :src="img.picUrl" />
          <h2 class="swiper-title">{{ img.title }}</h2>
          <span>{{ img.text }}</span>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="ad-wrapper outer-wrapper">
      <HomeLeftTitle :title="'旅游攻略推荐'" :subTitle="'更多'" />
      <a
        href="http://www.mafengwo.cn/gonglve/ziyouxing/402564.html?cid=1010617"
      >
        <img src="../../../static/images/index/babiQ.jpeg" alt="" />
      </a>
      <span class="mark">自由行攻略</span>
      <h3 class="ad-wrapper-bottom">
        <a href="###">寻味沈阳，那些不得不吃的美食盘点</a>
      </h3>
    </div>
    <div class="outer-wrapper">
      <HomeLeftTitle :title="'最新活动'" :subTitle="'查看全部>'" />
      <ul class="newActivity"></ul>
    </div>
    <div class="outer-wrapper">
      <HomeLeftTitle :title="'未知旅行实验室'" :subTitle="'查看更多>'" />
      <a href="https://topic.mafengwo.cn/t/sales/unknown" target="_blank">
        <img src="../../../static/images/index/future.png" alt="" />
      </a>
    </div>
    <div class="mafeng outer-wrapper">
      <HomeLeftTitle :title="'加入马蜂窝'" :subTitle="'了解详情'" />
      <a href="https://campus.mafengwo.cn/#/" target="_blank">
        <img src="../../../static/images/index/mafeng.jpeg" alt="" />
      </a>
    </div>
    <HomeLeftTitle :title="'马蜂窝旅游网最新资讯'" />
    <div class="mafeng-introduce">
      <ul class="introduce-wrapper">
        <li class="introduce-item">
          04月07日
          <a
            href="https://baijiahao.baidu.com/s?id=1663280885894494273&wfr=spider&for=pc"
            target="_blank"
          >
            马蜂窝“云旅游”直播的攻与守
          </a>
        </li>
        <li class="introduce-item">
          04月01日
          <a
            href="https://baijiahao.baidu.com/s?id=1662750909474123495&wfr=spider&for=pc"
            target="_blank"
          >
            马蜂窝的“云上战疫”
          </a>
        </li>
        <li class="introduce-item">
          02月19日
          <a
            href="http://tech.gmw.cn/2020-02/19/content_33570713.htm"
            target="_blank"
          >
            科技“战疫” ：马蜂窝大数据赋能旅游业
          </a>
        </li>
        <li class="introduce-item">
          02月13日
          <a
            href="http://travel.sina.com.cn/domestic/news/2020-02-09/detail-iimxyqvz1531129.shtml"
            target="_blank"
          >
            陈罡：疫情下旅游业的“守恒与求变”
          </a>
        </li>
        <li class="introduce-item">
          02月06日
          <a
            href="https://baijiahao.baidu.com/s?id=1657756347318145074&wfr=spider&for=pc"
            target="_blank"
          >
            马蜂窝将退订完成率定为最高KPI
          </a>
        </li>
        <li class="introduce-item">
          09月28日
          <a
            href="http://www.tzgcjie.com/keji/yejie/72051.html"
            target="_blank"
          >
            马蜂窝国庆白领出游偏好调查：超7成在旅途中工作
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import HomeLeftTitle from '../../../components/homeLeftTitle'
export default {
  name: 'BottomLeft',
  props: {
    tourList: {
      type: Array
    }
  },
  //picUrl text title
  data() {
    return {}
  },
  components: {
    HomeLeftTitle
  },
  watch: {
    tourList: {
      handler() {
        this.$nextTick(() => {
          this.swiper = new Swiper(this.$refs.swiper, {
            pagination: {
              // 小圆点
              el: '.swiper-pagination'
            },
            loop: true, // 无缝轮播
            autoplay: {
              // 自动轮播
              delay: 1000
            }
          })
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang='stylus' scoped>
.left-wrapper {
  width: 260px;

  .safe {
    width: 100%;

    a {
      display: block;

      img {
        width: 218px;
        height: 31px;
      }
    }
  }
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  bottom: 40px !important;
  width: 15px;
  height: 8px;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 80px;
  left: 70px;
}

.swiper-container {
  margin-bottom: 30px;
}

.swiper-title {
  margin: 5px 0;
}

.outer-wrapper {
  margin-bottom: 30px;
}

.ad-wrapper {
  position: relative;

  .mark {
    position: absolute;
    left: 0;
    top: 50px;
    padding: 0 6px;
    color: #fff;
    line-height: 24px;
    background-color: #ff6262;
    font-size: 12px;
  }

  .ad-wrapper-bottom {
    margin: 10px 0 5px;
    width: 260px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    color: #333;
    font-weight: normal;
    overflow: hidden;

    &:hover {
      a {
        color;
      }
    }
  }
}

.newActivity {
  width: 100%;
  height: 244px;
}

.mafeng {
  img {
    width: 100%;
  }
}

.mafeng-ad {
  font-weight: normal;
}

.mafeng-introduce {
  width: 100%;

  .introduce-wrapper {
    width: 100%;
  }
}

.introduce-wrapper li {
  width: 100%;
  margin-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  &:hover {
    a {
      text-decoration: none;
      color: #666 !important;
    }
  }
}
</style>